
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Navbar } from "@/components/Navbar";
import { Footer } from "@/components/Footer";
import { Mail, Linkedin, Twitter } from "lucide-react";

interface TeamMember {
  id: string;
  name: string;
  role: string;
  bio: string;
  avatar?: string;
  email: string;
  linkedin?: string;
  twitter?: string;
  specialties: string[];
}

const teamMembers: TeamMember[] = [
  {
    id: "1",
    name: "Dr. Sarah Chen",
    role: "CEO & Co-founder",
    bio: "Former Stanford professor with 15+ years in educational technology. Passionate about AI-powered personalized learning.",
    email: "sarah@mevolution.com",
    linkedin: "sarah-chen-edu",
    twitter: "sarahchen_edu",
    specialties: ["Educational AI", "Machine Learning", "Curriculum Design"]
  },
  {
    id: "2",
    name: "Michael Rodriguez",
    role: "CTO & Co-founder",
    bio: "Tech veteran with expertise in scalable AI systems. Previously led engineering teams at Google and Microsoft.",
    email: "michael@mevolution.com",
    linkedin: "michael-rodriguez-tech",
    specialties: ["AI Architecture", "System Design", "Full-stack Development"]
  },
  {
    id: "3",
    name: "Dr. Emily Watson",
    role: "Head of Learning Sciences",
    bio: "Educational psychologist specializing in learning assessment and cognitive science. PhD from Harvard.",
    email: "emily@mevolution.com",
    linkedin: "emily-watson-phd",
    specialties: ["Learning Psychology", "Assessment Design", "Research"]
  },
  {
    id: "4",
    name: "David Kim",
    role: "Lead Product Designer",
    bio: "Award-winning UX designer focused on creating intuitive educational experiences. Former Apple design team member.",
    email: "david@mevolution.com",
    linkedin: "david-kim-design",
    twitter: "davidkim_ux",
    specialties: ["UX Design", "User Research", "Design Systems"]
  },
  {
    id: "5",
    name: "Lisa Thompson",
    role: "Head of Community",
    bio: "Community building expert with a passion for connecting learners worldwide. Former education coordinator at Khan Academy.",
    email: "lisa@mevolution.com",
    linkedin: "lisa-thompson-community",
    twitter: "lisathompson_edu",
    specialties: ["Community Management", "User Engagement", "Content Strategy"]
  },
  {
    id: "6",
    name: "Dr. James Liu",
    role: "AI Research Scientist",
    bio: "Machine learning researcher specializing in natural language processing and educational AI. PhD from MIT.",
    email: "james@mevolution.com",
    linkedin: "james-liu-ai",
    specialties: ["NLP", "Deep Learning", "Educational AI Research"]
  }
];

const Team = () => {
  const getInitials = (name: string) => {
    return name.split(' ').map(n => n[0]).join('').toUpperCase();
  };

  return (
    <div className="min-h-screen flex flex-col bg-white">
      <Navbar />

      <main className="flex-1">
        {/* Hero Section */}
        <section className="py-20 bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto text-center">
              <h1 className="text-4xl md:text-6xl font-bold mb-6 text-gray-900">
                Meet Our Team
              </h1>
              <p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
                We're a passionate group of educators, technologists, and researchers dedicated to revolutionizing learning through AI-powered personalization.
              </p>
            </div>
          </div>
        </section>

        {/* Team Grid */}
        <section className="py-20 bg-white">
          <div className="container mx-auto px-4">
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
              {teamMembers.map((member) => (
                <Card key={member.id} className="h-full hover:shadow-lg transition-shadow duration-200">
                  <CardHeader className="text-center">
                    <Avatar className="w-24 h-24 mx-auto mb-4">
                      <AvatarImage src={member.avatar} alt={member.name} />
                      <AvatarFallback className="text-lg bg-gradient-to-br from-purple-500 to-pink-500 text-white">
                        {getInitials(member.name)}
                      </AvatarFallback>
                    </Avatar>
                    <CardTitle className="text-xl">{member.name}</CardTitle>
                    <CardDescription className="text-purple-600 font-medium">
                      {member.role}
                    </CardDescription>
                  </CardHeader>
                  
                  <CardContent className="space-y-4">
                    <p className="text-gray-600 text-sm leading-relaxed">
                      {member.bio}
                    </p>
                    
                    <div className="flex flex-wrap gap-1">
                      {member.specialties.map((specialty) => (
                        <Badge key={specialty} variant="outline" className="text-xs">
                          {specialty}
                        </Badge>
                      ))}
                    </div>
                    
                    <div className="flex items-center gap-3 pt-2">
                      <a
                        href={`mailto:${member.email}`}
                        className="text-gray-400 hover:text-purple-600 transition-colors"
                        title="Email"
                      >
                        <Mail className="w-4 h-4" />
                      </a>
                      {member.linkedin && (
                        <a
                          href={`https://linkedin.com/in/${member.linkedin}`}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-gray-400 hover:text-blue-600 transition-colors"
                          title="LinkedIn"
                        >
                          <Linkedin className="w-4 h-4" />
                        </a>
                      )}
                      {member.twitter && (
                        <a
                          href={`https://twitter.com/${member.twitter}`}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="text-gray-400 hover:text-blue-400 transition-colors"
                          title="Twitter"
                        >
                          <Twitter className="w-4 h-4" />
                        </a>
                      )}
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>
        </section>

        {/* Values Section */}
        <section className="py-20 bg-gray-50">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto text-center">
              <h2 className="text-3xl md:text-4xl font-bold mb-8 text-gray-900">
                Our Values
              </h2>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div className="text-center">
                  <h3 className="text-xl font-semibold mb-4 text-purple-600">Innovation</h3>
                  <p className="text-gray-600">
                    We continuously push the boundaries of educational technology to create breakthrough learning experiences.
                  </p>
                </div>
                <div className="text-center">
                  <h3 className="text-xl font-semibold mb-4 text-purple-600">Accessibility</h3>
                  <p className="text-gray-600">
                    We believe quality education should be accessible to everyone, regardless of background or circumstances.
                  </p>
                </div>
                <div className="text-center">
                  <h3 className="text-xl font-semibold mb-4 text-purple-600">Empowerment</h3>
                  <p className="text-gray-600">
                    We empower learners to discover their potential and achieve their goals through personalized guidance.
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

      <Footer />
    </div>
  );
};

export default Team;
